<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
    <style>
        .a{
            border : 1px solid blue;
        }
        .b{
            padding: 15px;
        }
    </style>
</head>
<body>
<div id="a" style="padding: 20px">
<!--    href 是动态的值-->
    <h3>设置单值属性</h3>
    <a v-bind:href="url">{{url}}</a><br>
    <a href="index.html">index.html</a>

    <h3>设置数组语法</h3>
<!--    可以使用多个选择器-->
    <a v-bind:href="url"
       v-bind:class="['a' , 'b']"
       style=" color: red; font-size: 20px;"
    >{{url}}</a>

    <h3>设置对象属性</h3>
    <a v-bind:href="url"
       v-bind:class="{a: aFlag , b: bFlag}"
    >{{url}}</a><br>

<!--    语法糖 v-bind: => : -->
    <a v-bind:href="url"
       :style="{color : 'green', fontSize : fsize}"
    >{{url}}</a>


    <h3>设置函数语法</h3>
    <a v-bind:href="url"
       :style="mystyle()"
    >{{url}}</a><br>

    <a v-bind:href="url"
       :style="mystyle1()"
    >{{url}}</a><br>

    <a v-bind:href="url"
       :style="mystyle2()"
    >{{url}}</a><br>
</div>

<script>
    var vue = new Vue({
        el : "#a",
        // 数据集
        data : {
            url : "index.html",
            aFlag : true,
            bFlag : false,
            fsize : "2em"
        },
        // 函数集
        methods : {
            // 非箭头函数
            mystyle : function () {
                return {color : 'red', fontSize : this.fsize};
            },
            // 箭头函数在 methods 中不能使用 this
            mystyle1 : ()=>{
                console.info(this);
                return {color : 'blue', fontSize : '1.5em'};
            },
            // 直接定义，常用
            mystyle2(){
                return {color : 'yellow', fontSize : this.fsize};
            },
        }
    })
</script>

</body>
</html>